import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:jump_scape/js_ui/js_widget/js_image_view.dart';
import 'package:jump_scape/js_ui/js_widget/js_style.dart';

import '../../js_data/js_box/js_init.dart';
import '../../objectbox.g.dart';

jsShowBuyTopicDialog(
  BuildContext context, {
  required String coins,
  required Function(bool isYes) onTap,
}) async {
  final setting = await JsObjectBox.setting;
  var member = JsObjectBox.memberBox.query(MemberBox_.userId.equals(setting.userId)).build().findFirst();
  final balance = member?.balance ?? '0';

  showDialog(
    context: context,
    barrierDismissible: false,
    useSafeArea: false,
    barrierColor: Colors.black.withOpacity(0.55),
    builder: ((context) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 280.r,
            decoration: jsShapeRound(radius: 12.r, color: Colors.white, shadows: [
              BoxShadow(offset: Offset(2.r, 4.r), blurRadius: 4.r, color: Colors.black.withOpacity(0.2)),
            ]),
            child: Dialog(
              alignment: Alignment.center,
              backgroundColor: Colors.transparent,
              insetPadding: EdgeInsets.zero,
              child: Container(
                width: 280.r,
                decoration: jsShapeRound(radius: 12.r, color: Colors.white, shadows: [
                  BoxShadow(offset: Offset(2.r, 4.r), blurRadius: 4.r, color: Colors.black.withOpacity(0.2)),
                ]),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 29.r,
                      padding: EdgeInsets.symmetric(horizontal: 16.r),
                      decoration: ShapeDecoration(
                        color: Color(0xFFFF84C7),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(topLeft: Radius.circular(12.r), bottomRight: Radius.circular(8.r)),
                        ),
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          jsImage('assets/image/ic_icon.png', width: 26.r, fit: BoxFit.fitWidth, padding: EdgeInsets.only(right: 4.r)),
                          Text(balance, style: jsTextStyle(font: JsTextFont.PoetsenOne, fontColor: Colors.white, fontSize: 20.r)),
                        ],
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.fromLTRB(30.r, 10.r, 30.r, 13.r),
                      child: Text('Are you sure you want to spend $coins coins to buy?', textAlign: TextAlign.center, style: jsTextStyle(font: JsTextFont.PoetsenOne, fontColor: Color(0xFF050A32), fontSize: 18.r, height: 28.0 / 18)),
                    ),
                    Container(width: double.infinity, height: 0.5.r, color: Color(0xFFCCCCCC)),
                    Row(
                      children: [
                        Expanded(
                          child: InkWell(
                            child: Container(
                              height: 51.r,
                              alignment: Alignment.center,
                              child: Text('No', style: jsTextStyle(font: JsTextFont.PoetsenOne, fontSize: 18.r, fontColor: Color(0xFF9A9A9A))),
                            ),
                            onTap: () {
                              if (Navigator.canPop(context)) {
                                Navigator.pop(context);
                              }
                              onTap(false);
                            },
                          ),
                        ),
                        Container(width: 0.5.r, height: 51.r, color: Color(0xFFCCCCCC)),
                        Expanded(
                          child: InkWell(
                            child: Container(
                              height: 51.r,
                              alignment: Alignment.center,
                              child: Text('Yes', style: jsTextStyle(font: JsTextFont.PoetsenOne, fontSize: 18.r, fontColor: Color(0xFF050A32))),
                            ),
                            onTap: () {
                              if (Navigator.canPop(context)) {
                                Navigator.pop(context);
                              }
                              onTap(true);
                            },
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      );
    }),
  );
}

jsShowPurchaseSuccessDialog(
  BuildContext context,
  Function() onTap,
) {
  showDialog(
    context: context,
    barrierDismissible: false,
    useSafeArea: false,
    barrierColor: Colors.black.withOpacity(0.55),
    builder: ((context) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: double.infinity,
            margin: EdgeInsets.symmetric(horizontal: 90.r),
            decoration: jsShapeRound(radius: 10.r, color: Colors.white, shadows: [
              BoxShadow(offset: Offset(1.5.r, 3.r), blurRadius: 3.r, color: Colors.black.withOpacity(0.2)),
            ]),
            child: Dialog(
              alignment: Alignment.center,
              backgroundColor: Colors.transparent,
              insetPadding: EdgeInsets.zero,
              child: Container(
                width: double.infinity,
                decoration: jsShapeRound(radius: 10.r, color: Colors.white, shadows: [
                  BoxShadow(offset: Offset(1.5.r, 3.r), blurRadius: 3.r, color: Colors.black.withOpacity(0.2)),
                ]),
                child: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.fromLTRB(0, 25.r, 0, 18.r),
                      child: Text('Purchase Success', style: jsTextStyle(font: JsTextFont.PoetsenOne, fontColor: Color(0xFF050A32), fontSize: 16.r)),
                    ),
                    Container(width: double.infinity, height: 0.5.r, color: Color(0xFFCCCCCC)),
                    InkWell(
                      child: Container(
                        height: 51.r,
                        alignment: Alignment.center,
                        child: Text('OK', style: jsTextStyle(font: JsTextFont.PoetsenOne, fontSize: 14.r, fontColor: Color(0xFF050A32))),
                      ),
                      onTap: () {
                        if (Navigator.canPop(context)) {
                          Navigator.pop(context);
                        }
                        onTap();
                      },
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      );
    }),
  );
}

jsShowInsufficientGoldCoinsDialog(
  BuildContext context,
  Function(bool isRecharge) onTap,
) {
  showDialog(
    context: context,
    barrierDismissible: false,
    useSafeArea: false,
    barrierColor: Colors.black.withOpacity(0.55),
    builder: ((context) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 280.r,
            decoration: jsShapeRound(radius: 12.r, color: Colors.white, shadows: [
              BoxShadow(offset: Offset(2.r, 4.r), blurRadius: 4.r, color: Colors.black.withOpacity(0.2)),
            ]),
            child: Dialog(
              alignment: Alignment.center,
              backgroundColor: Colors.transparent,
              insetPadding: EdgeInsets.zero,
              child: Container(
                width: 280.r,
                decoration: jsShapeRound(radius: 12.r, color: Colors.white, shadows: [
                  BoxShadow(offset: Offset(2.r, 4.r), blurRadius: 4.r, color: Colors.black.withOpacity(0.2)),
                ]),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                      padding: EdgeInsets.fromLTRB(30.r, 25.r, 30.r, 18.r),
                      child: Text('Insufficient gold coins', textAlign: TextAlign.center, style: jsTextStyle(font: JsTextFont.PoetsenOne, fontColor: Color(0xFF050A32), fontSize: 18.r, height: 28.0 / 18)),
                    ),
                    Container(width: double.infinity, height: 0.5.r, color: Color(0xFFCCCCCC)),
                    Row(
                      children: [
                        Expanded(
                          child: InkWell(
                            child: Container(
                              height: 51.r,
                              alignment: Alignment.center,
                              child: Text('Cancel', style: jsTextStyle(font: JsTextFont.PoetsenOne, fontSize: 18.r, fontColor: Color(0xFF9A9A9A))),
                            ),
                            onTap: () {
                              if (Navigator.canPop(context)) {
                                Navigator.pop(context);
                              }
                              onTap(false);
                            },
                          ),
                        ),
                        Container(width: 0.5.r, height: 51.r, color: Color(0xFFCCCCCC)),
                        Expanded(
                          child: InkWell(
                            child: Container(
                              height: 51.r,
                              alignment: Alignment.center,
                              child: Text('Recharge', style: jsTextStyle(font: JsTextFont.PoetsenOne, fontSize: 18.r, fontColor: Color(0xFF050A32))),
                            ),
                            onTap: () {
                              if (Navigator.canPop(context)) {
                                Navigator.pop(context);
                              }
                              onTap(true);
                            },
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      );
    }),
  );
}
